﻿@model StatisticsPackagesViewModel
@{
    ViewBag.Title = "Package Version Download Statistics";
    ViewBag.Tab = "Statistics";
}

@helper ShowIfAllPackageSet()
{
    @:style="display:none;" data-bind="visible: showAllPackageDownloads"
}

@helper ShowIfCommunityPackageSet()
{
    @:data-bind="visible: !showAllPackageDownloads()"
}

<section role="main" class="container main-container page-statistics-most-downloaded">
    <div class="row">
        <div class="col-xs-12">
            <h1>Most Downloaded Package Versions</h1>

            <span class="ms-fontSize-l" data-bind="text: showAllPackageDownloads() ? 'Top 500 Packages Over the Last 6 Weeks' : 'Top 500 Community Packages Over the Last 6 Weeks'">
                Top 500 Community Packages Over the Last 6 Weeks
            </span>
            <label class="show-all-packages-toggle pull-right">
                <input type="checkbox" data-bind="checked: showAllPackageDownloads" />
                Show all packages
            </label>
        </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <table @ShowIfAllPackageSet() class="table borderless">
                    <caption class="sr-only">The packages with the most downloads.</caption>

                    <thead>
                        <tr class="package-versions">
                            <th scope="col">&nbsp;<span class="sr-only">#</span></th>
                            <th scope="col">Package</th>
                            <th scope="col">Version</th>
                            <th scope="col">Downloads</th>
                        </tr>
                    </thead>

                    <tbody>
                        @{
                            var index = 0;
                            foreach (var item in Model.DownloadPackageVersionsAll)
                            {
                                index++;

                                <tr>
                                    <td scope="row">@index</td>
                                    <td><a href="@Url.Package(item.PackageId)">@item.PackageId</a></td>
                                    <td><a href="@Url.Package(item.PackageId, item.PackageVersion)">@item.PackageVersion</a></td>
                                    <td><a href="@Url.StatisticsPackageDownloadsDetail(item.PackageId, item.PackageVersion)">@Model.DisplayDownloads(item.Downloads)</a></td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>

                <table @ShowIfCommunityPackageSet() class="table borderless">
                    <caption class="sr-only">The community packages with the most downloads.</caption>

                    <thead>
                        <tr class="package-versions">
                            <th scope="col">&nbsp;<span class="sr-only">#</span></th>
                            <th scope="col">Package</th>
                            <th scope="col">Version</th>
                            <th scope="col">Downloads</th>
                        </tr>
                    </thead>

                    <tbody>
                        @{
                            index = 0;
                            foreach (var item in Model.DownloadCommunityPackageVersionsAll)
                            {
                                index++;

                                <tr>
                                    <td scope="row">@index</td>
                                    <td><a href="@Url.Package(item.PackageId)">@item.PackageId</a></td>
                                    <td><a href="@Url.Package(item.PackageId, item.PackageVersion)">@item.PackageVersion</a></td>
                                    <td><a href="@Url.StatisticsPackageDownloadsDetail(item.PackageId, item.PackageVersion)">@Model.DisplayDownloads(item.Downloads)</a></td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                @Html.Partial("_LastUpdated", Model)
            </div>
        </div>
</section>

@section BottomScripts
{
    <script>
        $(function () {
            'use strict';

            var viewModel = {
                showAllPackageDownloads: ko.observable(false),
            };

            ko.applyBindings(viewModel);
        });
    </script>
}
